import InputIcon from "@src/components/inputIcon"
import SearchIcon from "@src/assets/search.svg?react"
import "./index.scss"
import {useRequest} from "ahooks";
import {
    playlistTrackAll,
    songsType,
    highQuality,
    playlistHot
} from "@src/services/music.ts"

import {Swiper, SwiperSlide} from "swiper/react";
import MusicCard from "@src/components/musicCard"
import {useEffect, useState} from "react";
import Skeleton from "@src/components/skeleton";
import SongListCard from "../_components/songListCard"
import Return2Icon from "@src/assets/return2.svg?react"
import {PlaylistTrackDataCreateType, PlaylistTrackDataCreate} from "@src/store/playlistTrackData";
import {useNavigate} from "react-router-dom";


export default function Default() {
    const navigate = useNavigate();
    //获取歌单使用歌曲
    const playlistTrackAllAPi = useRequest(playlistTrackAll, {manual: true})
    //获取推荐歌单
    const highQualityApi = useRequest(highQuality)
    //获取热门分类
    const playlistHotApi = useRequest(playlistHot)

    function processData<T>(data: Array<T>) {
        const chunkedData: Array<[T, T, T]> = [];
        for (let i = 0; i < data.length; i += 3) {
            chunkedData.push(data.slice(i, i + 3) as [T, T, T]);
        }
        return chunkedData;
    }

    //热歌榜
    const [hot, setHot] = useState<Array<songsType>>([])

    //新歌
    const [newSongsChart, setNewSongsChart] = useState<Array<songsType>>([])

    const load = async () => {
        //获取热播 排行
        await playlistTrackAllAPi.runAsync({id: 3778678, limit: 9}).then((data) => {
            setHot(data.songs)
        })

        //获取新歌 排行
        await playlistTrackAllAPi.runAsync({id: 3779629, limit: 9}).then((data) => {
            setNewSongsChart(data.songs)
        })
    }
    const playlistTrackDataCreate: PlaylistTrackDataCreateType = PlaylistTrackDataCreate()
    useEffect(() => {
        load().then()
    }, [])


    return (
        <div className="Default">
            <InputIcon readOnly type="search" onClick={() => navigate("searchSuggest")} Icon={<SearchIcon></SearchIcon>}
                       placeholder="搜索你想找的歌"></InputIcon>

            <div className="module">
                <h3 className="centered">热门分类
                    <span className="centered" onClick={() => navigate(`catList?tag=全部`)}>
                        更多 <Return2Icon></Return2Icon>
                    </span>
                </h3>
                <div className="playlistHotApi">
                    <ul>
                        {playlistHotApi.data !== undefined && playlistHotApi.data.tags.map((tag) => (
                            <Skeleton key={tag.id} loading={highQualityApi.loading} style={{aspectRatio: 0.8}}>
                                <li className="centered"
                                    onClick={() => navigate(`catList?tag=${tag.name}`)}>{tag.name}</li>
                            </Skeleton>
                        ))}
                    </ul>
                </div>
            </div>

            <div className="module">
                <h3>推荐歌单</h3>
                <div className="highQualityApi">
                    <Skeleton loading={highQualityApi.loading} style={{aspectRatio: 3,}}>
                        <Swiper slidesPerView={3} slidesPerGroup={3} spaceBetween={10}>
                            {
                                (highQualityApi.data !== undefined) && highQualityApi.data.playlists.map((item) => {
                                    return <SwiperSlide key={item.id}><SongListCard
                                        playlist={item}></SongListCard></SwiperSlide>
                                })
                            }
                        </Swiper>
                    </Skeleton>
                </div>
            </div>

            <div className="module">
                <h3>近期热播</h3>
                <div className="hot">
                    <Skeleton loading={hot.length == 0} style={{aspectRatio: 2.5}}>
                        <Swiper>
                            {processData<songsType>(hot).map((item: [songsType, songsType, songsType], index) => (
                                <SwiperSlide key={index}>
                                    <div  className="MusicCard-box" onClick={() => {
                                        if (playlistTrackDataCreate.id !== 3778678) {
                                            playlistTrackDataCreate.setId(3778678)
                                            playlistTrackDataCreate.setSongsList(hot)
                                        }
                                    }}>
                                        {item.map((item2: songsType) => {
                                            return <MusicCard key={item2.id} songs={item2}></MusicCard>
                                        })}
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </Skeleton>
                </div>
            </div>


            <div className="module">
                <h3>新歌榜</h3>
                <div className="hot">
                    <Skeleton loading={newSongsChart.length == 0} style={{aspectRatio: 2.5,}}>
                        <Swiper>
                            {processData<songsType>(newSongsChart).map((item: [songsType, songsType, songsType], index) => (
                                <SwiperSlide key={index}>
                                    <div className="MusicCard-box" onClick={() => {
                                        if (playlistTrackDataCreate.id !== 3779629) {
                                            playlistTrackDataCreate.setId(3779629)
                                            playlistTrackDataCreate.setSongsList(newSongsChart)
                                        }
                                    }}>
                                        {item.map((item2: songsType) => {
                                            return <MusicCard key={item2.id} songs={item2}></MusicCard>
                                        })}
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </Skeleton>
                </div>
            </div>


        </div>
    )
}